<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <meta name="keywords" content="layuimini,layui,layui模板,layui后台,后台模板,admin,admin模板,layui mini">
    <meta name="description" content="layuimini基于layui的轻量级前端后台管理框架，最简洁、易用的后台框架模板，面向所有层次的前后端程序,只需提供一个接口就直接初始化整个框架，无需复杂操作。">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="images/logo.jpg" type="image/x-icon" />
    
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>
    <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW">//密钥
    </script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW"></script>
    <!--<link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="css/themes/default.css" media="all">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">-->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">   
         body {
            background-color: rgb(137, 187, 204);
            font-size: 20px;
            background-image: url(./images/b4.png);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #464646;
        }
        #head{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: rgb(0, 0, 0);
        }
        .separt1{
            width: 200px;
            height: 50px;
            float: left;
            text-align: center;
        }
        .separt{
            width: 150px;
            height: 50px;
            float: left;
            text-align: center;
        }
        .change{
            color: rgb(148, 148, 148);
            text-decoration:none;
        }
        .change:hover{
            color: rgb(235, 253, 255);
        }
        .logo{
            text-align: center;
            font-size: 30px;
            color: white;
            font-family:"STCaiyun";
        }

        .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    } 
    </style>
</head>
<body>
    <div id="head">
        <b>
            <div class="separt1"><div style="height: 10px;"></div><span class="logo">文化遗址系统</span></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="index.html"><span>主页</span></a></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="luxian.html"><span>路线</span></a></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="collect.html"><span>去收藏</span></a></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="box.html"><span>收藏夹</span></a></div>
        </b>
        </div>
        <p style="text-align: center;
        font-size: 60px;
        font-family: '宋体';margin-top:70px">收藏夹</p>
        <!--
        <table width="600" border="1" cellspacing="0" id="mytable" style="text-align: center;">
            <thead>
                <tr>
                    <th>经度</th>
                    <th>纬度</th>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table><br>-->
        <table width="600" border="1" cellspacing="0" id="mytable" style="text-align: center;margin: auto;">
            <thead>
                <tr>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW">
        </script>
        <script>
            //首先，创建一个地图实例
           // var map = new BMap.Map("allmap");      
            //然后进行地图初始化（用一个Point坐标点和缩放级别来初始化地图。）
           // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   
            /*至此，地图初始化完成*/

            // 创建地理编码（地理解析器）实例      

            $.get('/du',function(re){
                var row=re;
                if(row==-1){
                    alert("您还未收藏");
                }
                else{
                    var l=row.length;
                let sArray=new Array();
                for(var i=0;i<l;i++){
                    sArray[i]=new Array();
                    for(var j=0;j<2;j++){
                        if(j==0){
                            sArray[i][j]=row[i].lng;
                        }
                        if(j==1){
                            sArray[i][j]=row[i].lat;
                        }
                    }
                }
                var n=5;

                w = 0.0352;
                var per=[{
                    n:w
                }]
                /*var tb=document.getElementById('tb');
                for(var i=0;i<l;i++){
                    //alert(i);
                    var trow=getDataRow(per[i],i);
                    
                    tb.appendChild(trow);
                }
                function getDataRow(h,i){
                    
                    var r=document.createElement('tr');
                    
                    var lngcell=document.createElement('td');
                    lngcell.innerHTML=sArray[i][0];
                    r.appendChild(lngcell);
                    var latcell=document.createElement('td');
                    latcell.innerHTML=sArray[i][1];
                    r.appendChild(latcell);
                    return r;
                }*/


                var myGeo = new BMap.Geocoder();    
            // 根据坐标得到地址描述    
            myGeo.getLocation(new BMap.Point(115.943241, 39.693589), function(result){      
                if (result){     
                    var comp=result.address;
                    console.log("add:",result.address);
                }      
            });
                var index=0;
            var tb=document.getElementById('tb');
            for(var i=0;i<l;i++){
                var pt=new BMap.Point(sArray[i][0],sArray[i][1]);
                myGeo.getLocation(pt,function(result){
                    var comp=result.address;
                    var trow=getDataRow2(per[i],i,comp);
                    tb.appendChild(trow);
                })
                index++;
            }
            function getDataRow2(h,i,comp){
                    
                    var r=document.createElement('tr');
                    
                    var addrcell=document.createElement('td');
                    addrcell.innerHTML=comp;
                    r.appendChild(addrcell);
                    return r;
            }
                }
                
            


            })
/*
            var myGeo = new BMap.Geocoder();    
            // 根据坐标得到地址描述    
            myGeo.getLocation(new BMap.Point(115.943241, 39.693589), function(result){      
                if (result){     
                    var comp=result.address;
                    console.log("add:",result.address);
                }      
            });
            var index=0;
            alert(l);
            for(var i=0;i<l;i++){
                alert(i);
                var pt=new BMap.Point(sArray[i][0],sArray[i][1]);
                myGeo.getLocation(pt,function(result){
                    var comp=result.address;
                    alert(comp);
                })
                index++;
            }
*/
        </script>
</body>
</html>
